<template>
  <div class="app-container">
    <button
      class="btn"
      v-for="(item, index) in btnList"
      :key="index"
      :style="{ top: item.top, right: item.right }"
      @click="forceSignal(item.params)"
    >
      {{ item.label }}
    </button>
    <div
      class="client"
      v-for="item in clientList"
      :key="item.id"
      :style="{ top: item.top, left: item.left }"
    >
      <Client :PostionNumber="item.params" />
    </div>
  </div>
</template>

<script>
import { btnList, clientList } from "./config/btn";
import { setSignal, modifySignal,modifyLplGhPlace } from "@/api/assembly/cage";
import Client from "@/views/production/device/components/client.vue";
export default {
  components: {
    Client,
  },
  data() {
    return {
      btnList,
      clientList,
    };
  },
  methods: {
    forceSignal(e) {
      this.$modal.confirm("请确认是否强制发送信号").then(() => {
        if (e.hasOwnProperty("methods")) {
           modifyLplGhPlace(e).then((res) => {
            console.log(res);
            this.$$message.success("设置理片笼参数成功");
          });
        } else {
          modifySignal(e).then((res) => {
            console.log(res);
            this.$$message.success("指令发送成功");
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  position: relative;
  height: 860px;
  background-image: url("../../../assets/images/ful3Dmax3.png");
  background-size: 100% 860px;
  background-repeat: no-repeat;
  transform: translateY(2px);
  .btn {
    position: absolute;
    font-size: 12px;
    scale: 0.8;
    padding: 5px;
    cursor: pointer;
  }
  .client {
    position: absolute;
    scale: (0.9);
  }
}
</style>